<template>
  <div class="login-container">
    <n-card class="login-card" title="用户登录">
      <n-form
        ref="formRef"
        :model="formData"
        :rules="rules"
        label-placement="left"
        label-width="auto"
        require-mark-placement="right-hanging"
        size="large"
      >
        <n-form-item label="用户名" path="account">
          <n-input
            v-model:value="formData.account"
            placeholder="请输入用户名"
            clearable
          >
            <template #prefix>
              <n-icon><i class="fas fa-user"></i></n-icon>
            </template>
          </n-input>
        </n-form-item>

        <n-form-item label="密码" path="password">
          <n-input
            v-model:value="formData.password"
            type="password"
            placeholder="请输入密码"
            clearable
            show-password-on="click"
          >
            <template #prefix>
              <n-icon><i class="fas fa-lock"></i></n-icon>
            </template>
          </n-input>
        </n-form-item>

        <n-form-item>
          <n-space vertical>
            <n-button
              type="primary"
              size="large"
              block
              :loading="loading"
              @click="handleLogin"
            >
              登录
            </n-button>
            <n-button
              size="large"
              block
              @click="goToRegister"
            >
              没有账号？立即注册
            </n-button>
          </n-space>
        </n-form-item>
      </n-form>
    </n-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { useMessage } from 'naive-ui'
import type { FormInst } from 'naive-ui'
import { useUserStore } from '@/stores/user'
import type { LoginDto } from '@/types/user'

const router = useRouter()
const message = useMessage()
const userStore = useUserStore()

// 表单引用
const formRef = ref<FormInst | null>(null)

// 表单数据
const formData = reactive<LoginDto>({
  account: '',
  password: ''
})

// 加载状态
const loading = ref(false)

// 表单验证规则
const rules = {
  account: {
    required: true,
    message: '请输入用户名',
    trigger: 'blur'
  },
  password: {
    required: true,
    message: '请输入密码',
    trigger: 'blur'
  }
}

// 登录处理
const handleLogin = async () => {
  if (!formRef.value) return

  try {
    await formRef.value.validate()
    loading.value = true

    await userStore.login(formData.account, formData.password)
    message.success('登录成功')
    
    // 跳转到首页
    router.push('/')
  } catch (error: any) {
    message.error(error.message || '登录失败')
  } finally {
    loading.value = false
  }
}

// 跳转到注册页
const goToRegister = () => {
  router.push('/register')
}
</script>

<style scoped>
.login-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
}

.login-card {
  width: 100%;
  max-width: 400px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* 响应式设计 */
@media (max-width: 480px) {
  .login-container {
    padding: 16px;
  }
  
  .login-card {
    max-width: 100%;
  }
}
</style> 